<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>

</style>
</head>

<body>
<p></p>
<div id="box">
    <p>abc</p>
    <p>fff</p>
</div>
<ul>
    <p>bcd</p>
    <li class="list">li 节点 1</li>
    <li class="list">li 节点 2</li>
    <li>li 节点 3</li>
</ul>
<form action="">
    <input type="text" name="user">
    <input type="text" name="user">
</form>
<script>
// 1. 根据 id 来获取到元素节点
var box = document.getElementById("box");
console.log(box);

// 2. 根据标签名来获取 HTMLCollection
var lis = document.getElementsByTagName("div")
console.log(lis);
console.log(Array.isArray(lis))

// 3. 根据类名来获取元素
var list = document.getElementsByClassName("list");
console.log(list);

// 4. 根据 name 属性的值类获取元素
var users = document.getElementsByName("user");
console.log(users);

// 5. document.querySelector
var p = document.querySelector("#box > p")
console.log(p);
// 6. document.querySelectorAll
var ps = document.querySelectorAll("#box > p")
console.log(ps);

// 可以直接通过简单的办法获取到 html 元素
console.log(document.documentElement);
// 获取 body 元素
console.log(document.body);
// 获取 head
console.log(document.head);
</script>
</body>
</html>